<template>
    <div class="sxnf_btn_template" :class="props.disabled ? 'disabled' : ''" :disabled="props.disabled" :style="{ color: props.color }">
        <div class="content">
            <div class="icon" v-if="props.icon && props.iconOptions == 'before'">
                <component class="icon" :is="icon"></component>
            </div>
            <span><slot></slot></span>
            <div class="icon1" v-if="props.icon && props.iconOptions == 'after'">
                <component class="icon" :is="icon"></component>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
interface Props {
    color?: string;
    icon?: string;
    iconOptions?: string;
    disabled?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
    color: "#23b14d",
    icon: "",
    iconOptions: "before",
    disabled: false,
});
</script>
<style scoped lang="scss">
.sxnf_btn_template {
    padding: 5px 15px;
    color: #23b14d;
    border-radius: 5px;
    background-color: #f5f7fa;
    cursor: pointer;
    display: inline-block;
    outline: none;
    border: none;
    line-height: normal;
    &:hover {
        background-color: #23b14d;
        color: #f5f7fa !important;
    }
    .content {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .icon {
            width: 14px;
            height: 14px;
            margin-right: 2px;
        }
        .icon1 {
            width: 14px;
            height: 14px;
            margin-left: 2px;
        }
        span {
            white-space: nowrap;
        }
    }
}
.disabled {
    cursor: no-drop;
    color: rgba(35, 177, 77, 0.8) !important;
    &:hover {
        color: rgba(35, 177, 77, 0.8) !important;
        background-color: #f5f7fa;
    }
}
</style>
